import 'package:flutter/material.dart';

import 'package:get/get.dart';
import 'package:getx_learn/app/common/widgets/widgets.dart';
import 'package:getx_learn/app/routes/app_pages.dart';

import '../controllers/response_listener_controller.dart';

class ResponseListenerView extends GetView<ResponseListenerController> {
  const ResponseListenerView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar(context: context, title: "数据响应监听"),
      body: ListView(
        children: [
          Text("""
          Obx()、GetX<MyController>()、GetBuilder<MyController>()等方式
          
          几种方式的使用，都需要在这集中方式包裹下的至少一级中，有使用到监听变量，否则会出现
          [Get] the improper use of a GetX has been detected. 
You should only use GetX or Obx for the specific widget that will be updated.
If you are seeing this error, you probably did not insert any observable variables into GetX/Obx 
or insert them outside the scope that GetX considers suitable for an update 
(example: GetX => HeavyWidget => variableObservable).
If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
这个异常。

        这个问题的解决，就是 Obx(()=>Container()) 中，一定要有一句代码是可以执行到 obs 变量的，否则就会抛出这个异常
        例如：
        有一个普通变量：var hello = "nihao";
        有一个rx变量：var count = 0.obs;
        
        Obx(() { 
          if (hello == "nihao"){
          // 这里就没有使用 rx 变量，所以就会抛出上面异常
          return Container();
          }
          return Text(count.toString());
         }) 这样是会报错的，必须改为
         
         Obx(() { 
         // 这里有调用到 rx 变量
          String countStr = count.toString();
          if (hello == "nihao"){
          // 因为第一句使用 rx 变量，所以就不会抛出上面异常
          return Container();
          }
          return Text(countStr);
         })

          也就是说：在这几个方法作用域内，必须有调用监听对象(.obs)，也就是尽可能缩小监听的范围；
         
     
          """),

          Divider(),

          ListTile(
            title: Text("Obx()的方式"),
            subtitle: Text("使用 Obx((){})"),
            onTap: (){
              Get.toNamed(Routes.FUN_RESPONSE1);
            },
          ),

          Divider(),


          ListTile(
            title: Text("GetX<MyController>()"),
            subtitle: Text("使用 GetX<MyController>()"),
            onTap: (){
              Get.toNamed(Routes.FUN_RESPONSE2);
            },
          ),

          Divider(),


          ListTile(
            title: Text("GetBuilder<MyController>()"),
            subtitle: Text("使用 GetBuilder<MyController>()"),
            onTap: (){
              Get.toNamed(Routes.FUN_RESPONSE3);
            },
          ),

          Divider(),

          ListTile(
            title: Text("ValueBuilder<int>的使用"),
            subtitle: Text("ValueBuilder<int>用于做临时的局部状态管理，开启一个小空间"),
            onTap: (){
              Get.toNamed(Routes.FUN_RESPONSE4);
            },
          ),

          Divider(),

        ],
      ),
    );
  }
}
